Refactor cover background controls #18718
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Disclaimer: since this is one of my first bigger PRs for Gutenberg, I approached this as a learning experience and hope that the changes are useful. Folks may want to take a different approach with this, which I absolutely understand :)
Description
@paaljoachim asked me to take a look at #14744, and as I was looking around at related issues to understand the context, I came across #16479. In order to add some better background tools to the Group block, it seems like the first step would be refactoring the background controls out of the cover block into a place where they could be used more generically.
The goal of this PR is to refactor the background controls out of the cover block into a new
__experimentalWithBackgroundControls
component located atblock-editor/background-controls
. I separated many of the intertwined aspects of the Cover block's edit component into separate pieces so that it will be easier to hide parts which might not be needed for other types of blocks like the group block.I think this is a good start to #16479 since it gives us a space to start thinking about how we should compose the background controls so that they can be easily used by other blocks. I expect a lot of this will change as we go forward, particularly with the design, but I hope this could let us abstract the changes behind this component so that other things which use it (for now, just the Cover block) will benefit from future changes.
Note that I did my best to avoid functionality changes. Most of the components and functions have been copy/pasted from the cover block's edit file and then wired together.
I took some inspiration from the new
useColors
hook by @epiqueras, but did not quite take the final steps of converting everything into a hook. For now, it remains a functional component :)Some things that still need consideration:
save
component? Currently, the Cover block's save component still works great, but we need to refactor those pieces out into this package so that it's easy to reuse them.How has this been tested?
On my local gutenberg/docker environment, I confirmed that the cover block works exactly as it did before. The UI and controls are in the same places, and changes like gradient cover, images, focal point, etc. still work as expected.
Types of changes
Refactor, non-breaking change.
Checklist: